<script lang="ts" setup>

import { appState } from '../../../common/manager/appManager'
import VMenuIcon from '../../../components/normal/icon/VMenuIcon.vue'

const props = defineProps({
  data: {
    type: Object,
    default: function() {
      return null
    }
  },
  root: {
    type: Boolean,
    default: false
  }
})


</script>

<script lang="ts">
export default { name: 'NavMenuItem' }
</script>

<template>
  <el-sub-menu v-if="data.children && data.children.length>0" :index="data.path" popper-class="dark-mode">
    <template #title>
      <el-icon>
        <template v-if="data.icon">
          <v-menu-icon v-if="data.icon.isSvg" class="menu-icon-svg" :icon="data.icon.value" />
          <v-icon v-else class="menu-icon" :icon="data.icon.value" />
        </template>
      </el-icon>
      <div class="menu-inner">
        <div v-if="!appState.menuMini" class="menu-lb">
          {{ data.title }}
        </div>
      </div>
    </template>

    <nav-menu-item v-for="item of data.children" :data="item" />
  </el-sub-menu>

  <el-menu-item v-else :index="data.path" :class="['menu-item-box',data.selected?'menu-item-box-sel':'']">
    <el-icon>
      <template v-if="data.icon">
        <v-menu-icon v-if="data.icon.isSvg" :class="['menu-icon-svg',data.selected?'menu-icon-svg-sel':'']" :icon="data.icon.value" />
        <v-icon v-else :class="['menu-icon',data.selected?'menu-icon-sel':'']" :icon="data.icon.value" />
      </template>
    </el-icon>
    <template #title>
      <div :class="['menu-inner',root?'menu-inner-root':'',]">
        <div class="menu-lb">
          {{ data.title }}
        </div>
      </div>
    </template>
  </el-menu-item>
</template>

<style scoped lang="scss">

.menu-item-box{

}

.menu-item-box-sel{
  background: var(--w-bg-light-low);
  .menu-lb{
    font-weight: bold;
  }

  &:hover{
    background: var(--w-bg-light-low);
  }
}

.menu-icon{
  flex:none;
  font-size: 16px;
  color:var(--w-menu-icon);
}
.menu-icon-sel{
  color:var(--w-menu-icon-sel);
}
.menu-icon-svg{
  flex:none;
  width: 18px ;
  height:18px;
  fill:var(--w-menu-icon);
}
.menu-icon-svg-sel{
  fill:var(--w-menu-icon-sel);
}
.menu-lb{
  flex:none;
  word-break: keep-all;
  white-space: nowrap;
  box-sizing: border-box;
}

.menu-inner{
  @include hor-group();
  font-size:14px;
  box-sizing: border-box;
}
.menu-inner-root{
  font-size:16px;
  .menu-icon{
    font-size: 20px;
  }
  .menu-lb{
    color:var(--w-color-nor);
  }
}

</style>
